<template>
    <div id="app">
        <vue-particle-line class="banner-wraper">
            <div class="black_line"></div>
            <div id="main">
                <router-view name="sidebar" class="sidebar"></router-view>
                <router-view></router-view>
                <router-view name="rightsidebar" class="rightsidebar"></router-view>

            </div>
        </vue-particle-line>

    </div>
</template>

<script>
    export default {
        name: 'app',
    }
</script>

<style lang="scss">
    img {
        width: 100%;
    }
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    a {
        color: #545455;
        cursor: pointer;
        display: block;
    }

    h1, h2, h3,
    h4,
    h5,
    h6 {
        margin: 0;
        padding: 0;
        font-weight: bold;
        line-height: 1.5;
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 20px 0 15px;
    }

    h1 {
        font-size: 22px;
    }

    @media (max-width: 767px) {
        h1 {
            font-size: 18px;
        }
    }

    h2 {
        font-size: 20px;
    }

    @media (max-width: 767px) {
        h2 {
            font-size: 16px;
        }
    }

    h3 {
        font-size: 18px;
    }

    @media (max-width: 767px) {
        h3 {
            font-size: 14px;
        }
    }

    h4 {
        font-size: 16px;
    }

    @media (max-width: 767px) {
        h4 {
            font-size: 12px;
        }
    }

    h5 {
        font-size: 14px;
    }

    @media (max-width: 767px) {
        h5 {
            font-size: 10px;
        }
    }

    h6 {
        font-size: 12px;
    }

    @media (max-width: 767px) {
        h6 {
            font-size: 8px;
        }
    }

    @media screen and (max-width: 767px) {
        #main {
            width: 90%;
            text-align: center;
            margin: auto;
        }
    }

    @media screen and (max-width: 767px) {
        #content {
            width: 100%;
            height: 100%;
            background-color: transparent;
        }
    }

    @media screen and (min-width: 767px) {
        #content {
            width: 65%;
            height: 100%;
            float: left;
            background-color: transparent;
        }
    }

    @media screen and (min-width: 767px) {
        #main {
            width: 80%;
            text-align: center;
            margin: auto;

        }
    }

    p {
        margin: 0 0 25px 0;
    }

    body {
        background-color: transparent;
        background: #283644;
        height: 100%;
        width: 100%;
        overflow: scroll;
        background-size: cover;
    }

    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 14px;
        text-align: center;
        color: #fff;
        background: #283644;
        .banner-wraper {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #283644;

        }
    }

    .black_line {
        width: 100%;
        height: 2px;
        margin-top: 20px;
    }
</style>
